import defaultIMG from '@/assets/images/defaultIMG.png'

// 导入需使用的全局组件
const importFn = require.context('./', false, /\.vue$/)

export default {
    install(app) {
        // 批量注册全局组件
        importFn.keys().forEach(path => {
            //导入组件
            const component = importFn(path).default
            //注册组件
            app.component(component.name,component)
        })

        // 定义自定义指令
        directives(app)
    }
}
const directives = (app) => {
    // Vue2.0 监听使用指令的DOM是否创建好，钩子函数:inserted
    // vue3.0 的指令拥有的钩子函数和组件的一样，使用指令的DOM是否创建好，钩子函数：mounted
    app.directive('lazy', {
        mounted(el, binding) {
            const observer = new IntersectionObserver(([{ isIntersecting }]) => {
                if (isIntersecting) {
                    observer.unobserve(el)
                    el.onerror = () => {
                        el.src = defaultIMG
                    }
                    el.src = binding.value
                }
            }, {
                threshold: 0.01
            })
            observer.observe(el)
        },
    })
}